  // pages/lbsIndex/lbsIndex.js
import {location} from '../../api/location.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentCategoryIndex: 0,//当前激活的分类
    activeMerchantIndex:0,
    coreLongitude: '117.194120427',//中心经度
    coreLatitude: '30.790610854',//中心纬度
    scale: 13,//缩放级别
    categoryData: [],
    merchantsData: [],//某一分类下的所有标记点数据
    markers: [],//标记点
    isSpread: true, //底部可滚动视图区域是否显示，true表示展开，false表示收缩
    scrollLeft: 0,//横向滚动条位置，默认为0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    wx.showLoading({
      title: '加载中...',
    })
    const {result:{data:cat}} = await location.queryCat();
    this.setData({
      categoryData:cat,
    })
    let currentCategory = this.data.categoryData[this.data.currentCategoryIndex].name;
    this.getCurrentData(currentCategory);
    wx.hideLoading()
    // this.getCurrentMarkers(merchantsData)
  },
  // 根据分类名称获取对应的景点
  getMarker(type){
    return this.merchantsData.map(r=>r.type === type)
  },


  
  // 底部导航切换
  onMerchantTap(e){
    let index = e.currentTarget.dataset.index;
    let markerIndex = this.data.markers[index];
    let markers = this.data.markers;
    markers.forEach((item, index) => {
      if (item.id === markerIndex.id){
        console.log(item.id, markerIndex.id)
        item.iconPath = "../../resource/images/0.png";
        this.setData({
          coreLongitude: item.longitude,//中心经度
          coreLatitude: item.latitude,//中心纬度
        })
       this.data.scale = 26;
      }else{
        item.iconPath = "../../resource/images/0choosed.png";
      }
    });
    this.setData({
      activeMerchantIndex:index,
      markers
    })
  },
  // 底部展开隐藏
  switchMerchantsItems(){
    this.setData({
      isSpread: !this.data.isSpread
    })
  },
  // 上传景点
  onUploadTap(){
    wx.navigateTo({
      url: '../upload/upload',
    })
  },
  // 分类切换
  categoryChange(e){
    let index = e.currentTarget.dataset.index;
    let currentCategory = this.data.categoryData[index].name;
    this.getCurrentData(currentCategory);
    this.setData({
      currentCategoryIndex: index
    })
  },
  // 获取指定分类下的数据
  async getCurrentData(currentCategory){
    const {result:{data:markers}} = await location.queryMarkers(currentCategory)
    this.setData({
      merchantsData:markers
    })
    let merchantsData = this.data.merchantsData.filter(r => r.type === currentCategory);
    this.getCurrentMarkers(merchantsData)
    this.setData({
      merchantsData
    })
  },
  //标记点绑定触发事件
  onMarkerTap(e){
    let markerId = e.markerId; // markerId 只能接收数字，并且不能重复
    let markers = this.data.markers;
    let merchantsData = this.data.merchantsData;
   
    //更新选中标记点的图标
    markers.forEach(item => {
      if (item.id != markerId) {
        item.iconPath = "../../resource/images/0choosed.png";
      }else{
        item.iconPath = "../../resource/images/0.png";
      }
    })
    //更新地图上的标记点数据
    this.setData({
      markers,
      activeMerchantIndex:(merchantsData.filter(r => r.sort == markerId)[0].sort )
    })
    //更新底部可滚动视图区域的横向滚动条位置
    let scrollLeft;
    merchantsData.forEach((item, index) => {
      console.log(item)
      if (item.sort == markerId) {
        scrollLeft = index * 140;
        this.setData({
          scrollLeft
        })
      }
    })
  },
  // 获取指定分类下的坐标点
  getCurrentMarkers(markersData){
    let markers = [];
    markersData.forEach((item)=>{
      markers.push({
        id:item.sort,
        latitude: item.latitude,
        longitude: item.longitude,
        iconPath:'../../resource/images/0choosed.png',
        width:32,
        height:40,
        label:{
          content: item.title,
          color:'#333',
          fontSize:12
        },
      })
    })
    this.setData({
      markers
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})